/**
 * Created by Administrator on 2017/10/10.
 */
import React from "react";
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {Icon,Tabs,TextareaItem,Button} from "antd-mobile";
import { createForm } from 'rc-form';
import styles from '../index.less';

const arr = [
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'completion'},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'choice',option:['社会主义建设','社会主义','特色社会主义','现代化']},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'choice',option:['正确','错误']},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'completion'},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'choice',option:['社会主义建设','社会主义','特色社会主义','现代化']},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'choice',option:['正确','错误']},
  {stem:'中国共产党是中国工人阶级的先锋队,同时是_____的先锋队?',type:'completion'},
  ];

class index extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      index:0,
      option:undefined,
      answers:[],
      // count:0
    };
  }
  Previous =(item)=>{
    if(this.state.index > 0) {
      this.setState({
        option:this.state.answers[this.state.index-1],
        index:this.state.index-1,
      })
    }
  };
  next =(item)=>{
    if(this.state.answers.length < arr.length){
      if(!((this.state.index +2) <= this.state.answers.length)){
        if(item.type === 'completion'){
          this.props.form.validateFields((error, value) => {
            console.log('value',value);
            this.state.answers.push(value.answer);
          })
        }else{
          this.state.answers.push(this.state.option);
        }
      }
    }

    if(this.state.index < arr.length-1){
      if((this.state.index +2) <= this.state.answers.length){
        this.setState({
          option:this.state.answers[this.state.index+1],
          index:this.state.index+1,
        })
      }else{
        this.setState({
          index:this.state.index+1,
          option:undefined
        })
      }
    }

  };
  onChoiceClick=(str)=>{
    this.setState({
      option:str
    })
  };

  render(){
    const { getFieldProps } = this.props.form;
    let item = arr[this.state.index];
    let label ;
    let answer ;
    console.log('23333',this.state.answers);
    console.log('this.state.option',this.state.option);
    switch (item.type)
    {
      case 'completion':
        label = '填空题';
        answer = <TextareaItem
          {...getFieldProps('answer',{
            initialValue: this.state.option
          })}
          rows={5}
          placeholder="在这里输入答案"
        />;
        break;
      case 'choice':
        label = '选择题';
        answer = <div>
          {
          item.option.map((i,index)=>{
            let option = String.fromCharCode(index+65);
            return(
              <div style={{display:'flex',marginBottom:'0.3rem'}} onClick={()=>this.onChoiceClick(option)}>
                <div className={this.state.option === option?'option_t':'option_f'}>{option}</div>
                <div className={this.state.option === option?'label_t':'label_f'}>{i}</div>
              </div>
              )
          })
          }
        </div>;
        break;
    }

    return(
      <div className="examination"  style={{backgroundColor:"white",padding:'0.4rem 0.25rem 0.3rem'}}>
        <div style={{lineHeight:2,marginBottom:"0.3rem"}}>
          <span style={{display:'inline-block',marginRight:"0.3rem",fontSize:"0.26rem",width:'1.2rem',height:'0.4rem',lineHeight:'0.4rem',textAlign:'center',backgroundColor:'#73B6FB',color:'white',borderRadius:'0.06rem'}}>
            {label}
          </span>
          <span>{`${this.state.index+1}.`}{item.stem}</span>
        </div>
        {answer}
        <div style={{marginTop:"0.5rem"}}>
          <div style={{width:"50%",display:'inline-block'}}>
            <Button className="btn" style={{marginRight:'0.2rem',float:'right'}} onClick={()=>this.Previous(arr[this.state.index-1])}>上一题</Button>
          </div>
          <div style={{width:"50%",display:'inline-block'}}>
            <Button className="btn" style={{marginLeft:"0.2rem"}} onClick={()=>this.next(item)}>
              {
                (this.state.index +1) === arr.length?'完成':'下一题'
              }
            </Button>
          </div>
        </div>
      </div>
    )
  }
}
const examination = createForm()(index);
function mapStateToProps({personCenter, personLayout}){
  return {personCenter, personLayout};
}
export default connect(mapStateToProps)(examination);
